import React, { FC, createRef } from 'react';
import { Link } from 'react-router-dom';
import { TagCard, TagCardProps } from '@/components';
import './index.less';

interface IProps {
  data: TagCardProps[];
}

export const TagCardList: FC<IProps> = ({ data }) => {
  const tagListElement = createRef<HTMLDivElement>();

  return (
    <div className='tag-list' ref={ tagListElement }>
      {
        data.map(({ title, icon, num }) =>
          <Link
            key={ title }
            className='tag-card-container'
            to="/resources"
          >
            <TagCard
              title={ title }
              icon={ icon }
              num={ num }
            />
          </Link>
        )
      }
    </div>
  );
};
